<style>
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_list {
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
  width: 100%;
}
table.{{$t|escape:'html'}}_list td.border {
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 35px;
  background-color: #eaf2f5;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.hi td {
  padding-left: 10px;
  height: 35px;
  background-color: #ff8000;
  border-right: 1px solid #ff8000;
  border-bottom: 1px solid #ff8000;
  cursor: move;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_list tr.roweven:hover td {
  background-color: #f4f3b2;
}
</style>

<table id="{{$t|escape:'html'}}_instances" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
  <tr>
    <td style="height: 35px;padding-left: 10px;"><input id="{{$t|escape:'html'}}_instances_select" type="checkbox"></input></td>
    <td class="border" style="padding-left: 10px;border-bottom: 0;" colSpan=5>
      <table>
        <tr>
          <td><select id="{{$t|escape:'html'}}_instances_actions"><option>{{t escape='html'}}Actions...{{/t}}</option></select></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr style="height: 30px;">
    <th width="50px"></th>
    <th width="50px" style="padding-left: 10px"><b>No.</b></th>
    <th width="400px" style="padding-left: 10px"><b>Name</b></th>
    <th width="200px" style="padding-left: 10px"><b>Code</b></th>
    <th style="padding-left: 10px"></th>
  </tr>
</table>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript" src="libs/pz/effect/myeffect.js"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    _selects= [];
    
    var _instances = JSON.parse('{{$instances|@json_encode|escape:'javascript'}}');
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      update_instances_table();
      
      var select, actions;
      select = document.getElementById('{{$t|escape:'html'}}_instances_select');
      select.onclick = function() {
        for (var idx in  _selects) {
          var obj = _selects[idx];
          obj.checked = this.checked;
        }
      };
      actions = document.getElementById('{{$t|escape:'html'}}_instances_actions');
      actions.options[actions.options.length] = new Option('Delete');
      actions.onchange = function() {
        if (this.selectedIndex == 1) {
          var deletes = [];
          for (var idx in  _selects) {
            var obj = _selects[idx];
            if (obj.checked) {
              deletes[deletes.length] = obj._obj;
            }
          }
          new RequestUtils()._custom('delete_instances', JSON.stringify(deletes), function(result, params) {
            for (var idx in  deletes) {
              var obj = deletes[idx];
              MiscUtils.remove(_instances, obj, null);
            }
            update_instances_table();
            actions.selectedIndex = 0;
          }, {
            pos : DOMUtils.findPos(this)
          });
        }
      };
    }
    
    
    function update_instances_table() {
      var table, tr, td, elm;
      
      table = document.getElementById('{{$t|escape:'html'}}_instances');
      DOMUtils.removeTableRows(table, 2);
      if (_instances.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'nohover';
        td = tr.insertCell(-1);
        td.className = 'border';
        td.colSpan = 5;
        td.style.padding = '5px 0 5px 10px';
        td.style.height = '35px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Products Found{{/t}}'));
        
      } else {
        for (var idx in _instances) {
          var obj = _instances[idx];
          
          tr = table.insertRow(-1);
          tr.className = (idx % 2 == 1) ? 'rowodd' : 'roweven';
          
          td = tr.insertCell(-1);
          elm = document.createElement('input');
          elm.type = 'checkbox';
          elm._obj = obj;
          _selects.push(elm);
          td.appendChild(elm);
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(parseInt(idx, 10) + 1));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode(obj.name));
          
          td = tr.insertCell(-1);
          td.appendChild(document.createTextNode('{' + obj.folder + ': ' + obj.id + '}'));
          
          td = tr.insertCell(-1);
          elm = document.createElement('img');
          elm.src = 'image/btn/setting.png';
          elm.style.cursor = 'pointer';
          elm._obj = obj;
          elm.onclick = function() {
            setInstance(this._obj.id, this._obj.folder);
          }
          td.appendChild(elm);
        }
      }
    }
    
    function setInstance(instance_id, plugin_forder) {
      var container = document.getElementById('{{$t|escape:'html'}}_instances');
      MyEffect.slide(container, null, function() { location.href = 'instance.php?inst_i=' + instance_id + '&inst_f=' + plugin_forder + '&inst_s=admin'; });
    }
  // -->
</script>